<template>
  <div class="notice-bar" v-if="barShow">
    <div class="bar-title">
      <div class="bar-title-text">
        <div v-for="(item, index) in newList" :key="item.id" v-show="currentIndex === index">
          <span>📢</span>
          <span style="margin-left: 0.5rem" class="bar-title-text-span"> {{ item.title }}</span>
        </div>
      </div>
      <div class="bar-title-button">
        <t-button
          size="small"
          @click="helpClick(item)"
          v-for="(item, index) in newList"
          :key="item.id"
          v-show="currentIndex === index && item.path && item.path !== ''"
          >查看详情</t-button
        >
      </div>
    </div>
    <div class="bar-close" @click="closeNotice">
      <t-icon name="close-rectangle" />
    </div>
  </div>
</template>
<script setup>
import { getTopHelp } from '@/api/help'
import { ref, watch } from 'vue'
import { useNoticeStore } from '@/store'
import router from '@/router'
const newList = ref([])

const noticeStore = useNoticeStore()

const barShow = ref(noticeStore.getNoticeVisible)
const currentIndex = ref(0)
//判断是否需要显示公告栏

const closeNotice = () => {
  barShow.value = false
  noticeStore.toggleNoticeVisible()
}

let intervalId = null

watch(
  newList,
  () => {
    const listLength = newList.value ? newList.value.length : 0

    if (listLength > 1) {
      if (intervalId) {
        clearInterval(intervalId)
      }
      intervalId = setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % listLength
      }, 5000)
    } else {
      if (intervalId) {
        clearInterval(intervalId)
        intervalId = null
      }
    }
  },
  { immediate: true }
)
const topHelp = async () => {
  const helpListStorage = sessionStorage.getItem('helpList')

  // 如果已经缓存了数据，直接从缓存中获取
  if (helpListStorage) {
    newList.value = JSON.parse(helpListStorage)
    return
  }

  const res = await getTopHelp()
  newList.value = res.data
  sessionStorage.setItem('helpList', JSON.stringify(newList.value))
}

topHelp()
//跳转到置顶公告详情
const helpClick = item => {
  router.push({
    path: '/details',
    query: {
      help: item.path
    }
  })
}
</script>
<style lang="scss" scoped>
/* 公告栏容器 */
.notice-bar {
  position: fixed;
  top: 0px;
  width: 100vw;
  height: 40px;
  background: var(--nar-bg-color);
  z-index: 999;
  transition: all 0.2s ease-in 0s;
}
.bar-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: wheat;
  z-index: 99;
  /* 根据需要设定宽度 */
  width: 85%;
}
.bar-title-text {
  display: flex;
  align-items: center;
  font-weight: bolder;
}
.bar-title-button .t-button {
  font-weight: bolder;
  margin-left: 1rem;
  background-color: #1ea366;
  border-color: #1ea366;
}

.bar-close {
  cursor: pointer;
  position: absolute;
  right: 2rem;
  width: 24px;
  height: 24px;
  font-size: 2rem;
  color: var(--td-bg-color-container);
  display: flex;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
}
</style>
